<template>
  <div class="exercise-container">
    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧：运动记录表单 -->
      <el-card class="record-form">
        <div slot="header">
          <span>记录运动</span>
        </div>
        <el-form :model="exerciseForm" :rules="rules" ref="exerciseForm" label-width="120px">
          <el-form-item label="运动日期" prop="date">
            <el-date-picker
              v-model="exerciseForm.date"
              type="date"
              placeholder="选择日期"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="运动类型" prop="type">
            <el-select v-model="exerciseForm.type" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in exerciseTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="开始时间" prop="startTime">
            <el-time-picker
              v-model="exerciseForm.startTime"
              placeholder="选择时间"
              format="HH:mm"
              style="width: 100%">
            </el-time-picker>
          </el-form-item>
          
          <el-form-item label="结束时间" prop="endTime">
            <el-time-picker
              v-model="exerciseForm.endTime"
              placeholder="选择时间"
              format="HH:mm"
              style="width: 100%">
            </el-time-picker>
          </el-form-item>
          
          <el-form-item label="运动强度" prop="intensity">
            <div class="slider-container">
              <el-slider
                v-model="exerciseForm.intensity"
                :step="1"
                :min="1"
                :max="5"
                class="intensity-slider">
              </el-slider>
              <!-- 自定义刻度标记 -->
              <div class="custom-marks">
                <span class="mark-text mark-1">很轻</span>
                <span class="mark-text mark-2">轻度</span>
                <span class="mark-text mark-3">中等</span>
                <span class="mark-text mark-4">高强</span>
                <span class="mark-text mark-5">极高</span>
              </div>
            </div>
          </el-form-item>
          
          <el-form-item label="备注" prop="note">
            <el-input
              type="textarea"
              v-model="exerciseForm.note"
              :rows="3"
              placeholder="记录运动的感受，难点或收获等">
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm('exerciseForm')" style="width: 100%">保存记录</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 右侧：数据分析 -->
      <div class="analysis-section">
        <!-- 时间范围选择 -->
        <el-card class="time-range">
          <el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
            <el-radio-button label="day">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </el-card>

        <!-- 运动数据统计 -->
        <el-card class="exercise-stats">
          <div slot="header">
            <span>运动统计</span>
          </div>
          <div class="stats-content">
            <div class="stat-item">
              <h3>运动时长</h3>
              <div class="value-container">
                <p class="number">{{ totalDuration }}</p>
                <p class="unit">分钟</p>
              </div>
            </div>
            <div class="stat-item">
              <h3>消耗卡路里</h3>
              <div class="value-container">
                <p class="number">{{ totalCalories }}</p>
                <p class="unit">千卡</p>
              </div>
            </div>
            <div class="stat-item">
              <h3>运动频率</h3>
              <div class="value-container">
                <p class="number">{{ exerciseFrequency }}</p>
                <p class="unit">次/{{ timeRangeText }}</p>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 图表区容器 -->
        <div class="charts-container" v-show="timeRange !== 'day'">
          <!-- 运动趋势图 -->
          <transition name="fade">
            <el-card class="exercise-trend" v-show="timeRange !== 'day'">
              <div slot="header">
                <span>运动趋势</span>
              </div>
              <div class="chart-container" ref="exerciseChart">
                <!-- 添加加载提示 -->
                <div class="chart-loading" v-if="!exerciseChart">
                  <i class="el-icon-loading"></i>
                  <p>加载中...</p>
                </div>
                <!-- 添加无数据提示 -->
                <div class="chart-empty" v-else-if="noChartData">
                  <i class="el-icon-data-analysis"></i>
                  <p>暂无运动趋势数据</p>
                </div>
              </div>
            </el-card>
          </transition>
        </div>

        <!-- 运动建议 -->
        <el-card class="exercise-advice">
          <div slot="header">
            <span>运动建议</span>
          </div>
          <div class="advice-content">
            <!-- 在日视图显示日建议 -->
            <div v-if="timeRange === 'day'" class="day-advice">
              <div v-if="dayAdvice" class="day-advice-content">
                <div class="formatted-advice" v-html="formatAdvice(dayAdvice)"></div>
              </div>
              <div v-else-if="!dayAdvice && hasData" class="loading-advice">
                <i class="el-icon-loading"></i>
                <p>加载日建议中...</p>
              </div>
              <div v-else class="no-data-advice">
                <!-- 当没有数据时显示默认建议 -->
                <el-collapse v-model="activeAdvice">
                  <el-collapse-item title="强度建议" name="1">
                    <div class="advice-item">
                      <i class="el-icon-data-line"></i>
                      <p>{{ advice.intensity }}</p>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="频率建议" name="2">
                    <div class="advice-item">
                      <i class="el-icon-date"></i>
                      <p>{{ advice.frequency }}</p>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="运动组合" name="3">
                    <div class="advice-item">
                      <i class="el-icon-set-up"></i>
                      <p>{{ advice.combination }}</p>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
            
            <!-- 在周视图显示周建议 -->
            <div v-if="timeRange === 'week'" class="week-advice">
              <div v-if="weekAdvice" class="week-advice-content">
                <div class="formatted-advice" v-html="formatAdvice(weekAdvice)"></div>
              </div>
              <div v-else class="loading-advice">
                <i class="el-icon-loading"></i>
                <p>加载周建议中...</p>
              </div>
            </div>
            
            <!-- 在月视图显示月度建议 -->
            <div v-if="timeRange === 'month'" class="month-advice">
              <div v-if="monthAdvice" class="month-advice-content">
                <div class="formatted-advice" v-html="formatAdvice(monthAdvice)"></div>
              </div>
              <div v-else class="loading-advice">
                <i class="el-icon-loading"></i>
                <p>加载月度建议中...</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ExerciseView',
  data() {
    return {
      exerciseForm: {
        date: new Date(),
        type: '',
        startTime: null,
        endTime: null,
        intensity: 3,
        note: ''
      },
      exerciseTypes: [
        { label: '步行', value: 'walking' },
        { label: '跑步', value: 'running' },
        { label: '骑行', value: 'cycling' },
        { label: '游泳', value: 'swimming' },
        { label: '登山', value: 'hiking' },
        { label: '羽毛球', value: 'badminton' },
        { label: '网球', value: 'tennis' },
        { label: '篮球', value: 'basketball' },
        { label: '足球', value: 'football' },
        { label: '瑜伽', value: 'yoga' },
        { label: '力量训练', value: 'strength' },
        { label: '舞蹈', value: 'dance' },
        { label: '其他', value: 'other' }
      ],
      rules: {
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        type: [{ required: true, message: '请选择运动类型', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        intensity: [{ required: true, message: '请选择运动强度', trigger: 'change' }]
      },
      timeRange: 'day',
      totalDuration: '85',
      totalCalories: '420',
      exerciseFrequency: '2',
      activeAdvice: ['1'],
      advice: {
        intensity: '',
        frequency: '',
        combination: ''
      },
      monthAdvice: '',
      weekAdvice: '',
      dayAdvice: '',
      exerciseChart: null,
      noChartData: false, // 添加标记无数据的状态
      hasData: false // 添加标记是否有数据的状态
    }
  },
  computed: {
    timeRangeText() {
      const map = {
        'day': '日',
        'week': '周',
        'month': '月'
      };
      return map[this.timeRange] || '周';
    }
  },
  mounted() {
    // 添加窗口大小变化监听，以便调整图表大小
    window.addEventListener('resize', this.handleResize);
    
    // 在初始化时如果不是"今日"视图，预先创建图表容器
    this.$nextTick(() => {
      if (this.timeRange !== 'day') {
        this.initChart();
      }
      
      // 加载运动数据
      this.loadExerciseData();
    });
  },
  watch: {
    timeRange(newVal, oldVal) {
      // 当时间范围变化时
      this.$nextTick(() => {
        if (newVal !== 'day') {
          // 确保DOM已更新
          setTimeout(() => {
            if (!this.exerciseChart) {
              this.initChart();
            } else {
              this.exerciseChart.resize();
            }
          }, 50);
        }
      });
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 准备发送到后端的数据
          if (this.exerciseForm.startTime && this.exerciseForm.endTime) {
            const sportData = {
              sportType: this.getChineseType(this.exerciseForm.type),
              startTime: this.formatDateTimeForBackend(this.exerciseForm.date, this.exerciseForm.startTime),
              endTime: this.formatDateTimeForBackend(this.exerciseForm.date, this.exerciseForm.endTime),
              intensity: this.exerciseForm.intensity, // 直接使用1-5的整数值
              note: this.exerciseForm.note
            };
            
            // 调用API保存运动记录
            this.axios.post('/api/user/sport/add', sportData)
              .then(response => {
                if (response.data && response.data.success) {
                  // 使用后端返回的卡路里数据
                  const calories = response.data.calories 
                    ? Math.round(response.data.calories) 
                    : 0;
                  
                  this.$message.success(`运动记录保存成功！本次运动消耗约 ${calories} 卡路里。`);
                  this.resetForm(formName);
                  // 保存成功后更新数据
                  this.loadExerciseData();
                } else {
                  this.$message.error(response.data.message || '保存失败，请稍后重试');
                }
              })
              .catch(error => {
                console.error('保存运动记录失败:', error);
                this.$message.error('保存失败，请稍后重试');
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleTimeRangeChange(value) {
      // 切换视图后，确保图表正确初始化或更新
      this.$nextTick(() => {
        if (value !== 'day') {
          // 给DOM更新留出时间
          setTimeout(() => {
            if (!this.exerciseChart) {
              this.initChart();
            } else {
              this.exerciseChart.resize();
            }
            
            // 加载对应的数据
            if (value === 'week') {
              this.loadWeekExerciseData();
              // 加载周运动建议
              this.loadWeekExerciseAdvice();
            } else if (value === 'month') {
              this.loadMonthExerciseData();
              // 加载月运动建议
              this.loadMonthExerciseAdvice();
            }
          }, 50);
        } else {
          // 如果切换到"今日"视图，加载今日数据
          this.loadDayExerciseData();
          // 加载日运动建议
          this.loadDayExerciseAdvice();
        }
      });
    },
    calculateDuration(startTime, endTime) {
      // 简单计算两个时间的分钟差
      const start = new Date(startTime);
      const end = new Date(endTime);
      let minutes = (end - start) / 60000;
      
      // 如果结束时间小于开始时间，假设是跨天的情况
      if (minutes < 0) {
        minutes += 24 * 60;
      }
      
      return Math.round(minutes);
    },
    initChart() {
      // 确保DOM元素存在再初始化
      if (!this.$refs.exerciseChart) {
        console.log('Chart container not found');
        return;
      }
      
      // 如果已有图表实例，先销毁
      if (this.exerciseChart) {
        this.exerciseChart.dispose();
        this.exerciseChart = null;
      }
      
      try {
        // 创建新的图表实例
        this.exerciseChart = echarts.init(this.$refs.exerciseChart);
        // 不再调用updateChart，而是等待数据加载后再更新图表
      } catch (error) {
        console.error('Failed to initialize chart:', error);
      }
    },

    handleResize() {
      // 调整图表大小
      if (this.exerciseChart) {
        this.exerciseChart.resize();
      }
    },
    // 加载运动数据
    loadExerciseData() {
      // 根据时间范围加载不同数据
      if (this.timeRange === 'day') {
        this.loadDayExerciseData();
        // 加载日运动建议
        this.loadDayExerciseAdvice();
      } else if (this.timeRange === 'week') {
        this.loadWeekExerciseData();
        // 加载周运动建议
        this.loadWeekExerciseAdvice();
      } else if (this.timeRange === 'month') {
        this.loadMonthExerciseData();
        // 加载月运动建议
        this.loadMonthExerciseAdvice();
      }
    },
    
    // 加载日运动数据
    loadDayExerciseData() {
      const today = this.formatDateForBackend(new Date());
      this.axios.get(`/api/user/sport/day?date=${today}`)
        .then(response => {
          if (response.data && response.data.success && response.data.data) {
            const exerciseData = response.data.data;
            
            if (exerciseData.length > 0) {
              // 设置有数据标记
              this.hasData = true;
              
              // 计算总运动时长（分钟）
              let totalMinutes = 0;
              let totalCalories = 0;
              
              exerciseData.forEach(record => {
                const startTime = new Date(record.startTime);
                const endTime = new Date(record.endTime);
                const durationMinutes = (endTime - startTime) / (1000 * 60);
                totalMinutes += durationMinutes;
                totalCalories += record.calories || 0;
              });
              
              // 更新统计数据
              this.totalDuration = Math.round(totalMinutes).toString();
              this.totalCalories = Math.round(totalCalories).toString();
              this.exerciseFrequency = `${exerciseData.length}`;
              
              // 如果当天有记录，可以更新表单
              if (exerciseData.length > 0) {
                const latestRecord = exerciseData[exerciseData.length - 1];
                this.updateFormWithRecord(latestRecord);
              }
            } else {
              // 没有数据时显示默认值
              this.hasData = false;
              this.totalDuration = '0';
              this.totalCalories = '0';
              this.exerciseFrequency = '0/' + this.timeRangeText;
            }
          } else {
            // 响应错误时显示默认值
            this.hasData = false;
            this.totalDuration = '0';
            this.totalCalories = '0';
            this.exerciseFrequency = '0/' + this.timeRangeText;
          }
        })
        .catch(error => {
          console.error('获取日运动数据失败:', error);
          // 出错时显示默认值
          this.hasData = false;
          this.totalDuration = '0';
          this.totalCalories = '0';
          this.exerciseFrequency = '0/' + this.timeRangeText;
        });
    },
    
    // 加载周运动数据
    loadWeekExerciseData() {
      this.axios.get('/api/user/sport/week')
        .then(response => {
          if (response.data && response.data.success && response.data.data) {
            const weekData = response.data.data;
            
            if (weekData.length > 0) {
              // 创建星期映射表
              const dayMap = {
                0: '周日', 1: '周一', 2: '周二', 3: '周三', 
                4: '周四', 5: '周五', 6: '周六'
              };
              
              // 初始化7天的数据结构
              const daysOfWeek = [0, 1, 2, 3, 4, 5, 6].map(day => ({
                day: dayMap[day],
                calories: 0,
                duration: 0,
                hasData: false
              }));
              
              // 计算总运动时长（分钟）和总卡路里
              let totalMinutes = 0;
              let totalCalories = 0;
              let daysWithExercise = 0;
              
              // 填充实际数据
              weekData.forEach(item => {
                if (item.day) {
                  const date = new Date(item.day);
                  const dayIndex = date.getDay(); // 0-6，0表示周日
                  
                  // 将小时转换为分钟
                  const durationMinutes = Math.round((item.total_duration_hours || 0) * 60);
                  
                  daysOfWeek[dayIndex].calories = Math.round(item.total_calories || 0);
                  daysOfWeek[dayIndex].duration = durationMinutes;
                  daysOfWeek[dayIndex].hasData = true;
                  
                  // 累计总值
                  totalMinutes += durationMinutes;
                  totalCalories += item.total_calories || 0;
                  daysWithExercise += 1; // 每条记录代表一天有运动
                }
              });
              
              // 按照周一到周日的顺序重新排列
              const orderedDays = [
                daysOfWeek[1], daysOfWeek[2], daysOfWeek[3], 
                daysOfWeek[4], daysOfWeek[5], daysOfWeek[6], daysOfWeek[0]
              ];
              
              // 提取数据到图表数组
              const xAxisData = orderedDays.map(day => day.day);
              const caloriesData = orderedDays.map(day => day.calories);
              const durationData = orderedDays.map(day => day.duration);
              
              // 检查是否有数据
              const hasData = orderedDays.some(day => day.hasData);
              
              // 更新统计数据
              this.totalDuration = Math.round(totalMinutes).toString();
              this.totalCalories = Math.round(totalCalories).toString();
              this.exerciseFrequency = `${daysWithExercise}`;
              
              if (hasData) {
                this.hasData = true;
                this.noChartData = false;
                
                // 更新图表
                this.$nextTick(() => {
                  this.updateChartWithData(xAxisData, caloriesData, durationData);
                });
              } else {
                this.hasData = false;
                this.noChartData = true;
              }
            } else {
              // 没有数据时显示默认值
              this.hasData = false;
              this.totalDuration = '0';
              this.totalCalories = '0';
              this.exerciseFrequency = '0/' + this.timeRangeText;
              this.noChartData = true;
            }
          } else {
            // 响应错误时显示默认值
            this.hasData = false;
            this.totalDuration = '0';
            this.totalCalories = '0';
            this.exerciseFrequency = '0/' + this.timeRangeText;
            this.noChartData = true;
          }
        })
        .catch(error => {
          console.error('获取周运动数据失败:', error);
          // 出错时显示默认值
          this.hasData = false;
          this.totalDuration = '0';
          this.totalCalories = '0';
          this.exerciseFrequency = '0/' + this.timeRangeText;
          this.noChartData = true;
        });
    },
    
    // 加载月运动数据
    loadMonthExerciseData() {
      this.axios.get('/api/user/sport/month')
        .then(response => {
          if (response.data && response.data.success && response.data.data) {
            const monthData = response.data.data;
            
            if (monthData.length > 0) {
              // 检查是否有第五周数据
              let hasFifthWeek = false;
              let maxWeekNumber = 0;
              
              // 遍历数据检查最大周数
              for (const item of monthData) {
                if (item && item.week) {
                  const weekNumber = parseInt(item.week.replace('Week ', ''));
                  if (!isNaN(weekNumber) && weekNumber > maxWeekNumber) {
                    maxWeekNumber = weekNumber;
                  }
                  if (weekNumber === 5) {
                    hasFifthWeek = true;
                  }
                }
              }
              
              // 根据是否有第五周动态设置x轴数据和初始数据数组
              const xAxisData = hasFifthWeek ? 
                ['第1周', '第2周', '第3周', '第4周', '第5周'] : 
                ['第1周', '第2周', '第3周', '第4周'];
                
              // 初始化数据数组为0
              const caloriesData = new Array(xAxisData.length).fill(0);
              const durationData = new Array(xAxisData.length).fill(0);
              
              // 计算总运动时长（分钟）和总卡路里
              let totalMinutes = 0;
              let totalCalories = 0;
              let daysWithExercise = 0;
              
              // 创建一个映射来存储周数据
              const weekDataMap = {
                1: null, 2: null, 3: null, 4: null, 5: null
              };
              
              // 处理每周数据
              monthData.forEach((item) => {
                // 确保有有效的数据
                if (item && item.week && item.sport_days_count > 0) {
                  // 从周标识中提取周数
                  const weekNumber = parseInt(item.week.replace('Week ', ''));
                  
                  if (!isNaN(weekNumber) && weekNumber >= 1 && weekNumber <= 5) {
                    // 将小时转换为分钟
                    const durationMinutes = Math.round((item.total_duration_hours || 0) * 60);
                    const calories = Math.round(item.total_calories || 0);
                    
                    // 将数据存储到对应周位置
                    weekDataMap[weekNumber] = {
                      week: item.week,
                      weekNumber,
                      durationMinutes,
                      calories,
                      sportDays: item.sport_days_count
                    };
                    
                    // 更新图表数据数组
                    if (weekNumber <= caloriesData.length) {
                      caloriesData[weekNumber - 1] = calories;
                      durationData[weekNumber - 1] = durationMinutes;
                    }
                    
                    // 累计总值
                    totalMinutes += durationMinutes;
                    totalCalories += calories;
                    daysWithExercise += item.sport_days_count || 0; // 累加每周的运动天数
                  }
                }
              });
              
              // 检查是否有任何有效数据
              const hasAnyData = Object.values(weekDataMap).some(week => week !== null);
              
              // 更新统计数据
              this.totalDuration = Math.round(totalMinutes).toString();
              this.totalCalories = Math.round(totalCalories).toString();
              this.exerciseFrequency = `${daysWithExercise}`;
              
              if (hasAnyData) {
                this.hasData = true;
                this.noChartData = false;
                
                // 更新图表
                this.$nextTick(() => {
                  this.updateChartWithData(xAxisData, caloriesData, durationData);
                });
              } else {
                this.hasData = false;
                this.noChartData = true;
              }
            } else {
              // 没有数据时显示默认值
              this.hasData = false;
              this.totalDuration = '0';
              this.totalCalories = '0';
              this.exerciseFrequency = '0/' + this.timeRangeText;
              this.noChartData = true;
            }
          } else {
            // 响应错误时显示默认值
            this.hasData = false;
            this.totalDuration = '0';
            this.totalCalories = '0';
            this.exerciseFrequency = '0/' + this.timeRangeText;
            this.noChartData = true;
          }
        })
        .catch(error => {
          console.error('获取月运动数据失败:', error);
          // 出错时显示默认值
          this.hasData = false;
          this.totalDuration = '0';
          this.totalCalories = '0';
          this.exerciseFrequency = '0/' + this.timeRangeText;
          this.noChartData = true;
        });
    },
    
    // 使用提供的数据更新图表
    updateChartWithData(xAxisData, caloriesData, durationData) {
      if (!this.exerciseChart) return;
      
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let result = params[0].name + '<br/>';
            params.forEach(param => {
              if (param.seriesName === '平均卡路里消耗' || param.seriesName === '平均时长') return;
              let value = param.value;
              let unit = param.seriesName === '消耗卡路里' ? '千卡' : '分钟';
              result += param.marker + ' ' + param.seriesName + ': ' + value + unit + '<br/>';
            });
            return result;
          }
        },
        legend: {
          data: ['消耗卡路里', '运动时长'],
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxisData,
          axisLabel: {
            fontSize: 14,
            show: true,
            interval: 0,
            rotate: 0,
            color: '#303133',
            margin: 15,
            formatter: function(value) {
              return value;
            }
          },
          axisTick: {
            alignWithLabel: true,
            show: true,
            length: 6
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#909399',
              width: 2
            }
          },
          nameTextStyle: {
            fontSize: 14,
            color: '#303133'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '热量(千卡)',
            min: 0,
            position: 'left',
            axisLabel: {
              fontSize: 14,
              color: '#ff9a9e'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ff9a9e'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#f0f0f0'
              }
            }
          },
          {
            type: 'value',
            name: '时长(分钟)',
            min: 0,
            position: 'right',
            axisLabel: {
              fontSize: 14,
              color: '#4facfe'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4facfe'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '消耗卡路里',
            type: 'bar',
            data: caloriesData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff9a9e' },
                { offset: 1, color: '#fad0c4' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#ff9a9e' },
                  { offset: 1, color: '#fad0c4' }
                ])
              }
            },
            barWidth: '40%', // 控制柱状图宽度
            showBackground: true, // 显示背景
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.1)'
            }
          },
          {
            name: '运动时长',
            type: 'line',
            yAxisIndex: 1,
            data: durationData,
            symbolSize: 10,
            showSymbol: true,
            connectNulls: true,
            symbol: 'circle',
            itemStyle: {
              color: '#4facfe',
              borderWidth: 2,
              borderColor: '#fff'
            },
            lineStyle: {
              width: 4,
              color: '#4facfe'
            },
            emphasis: {
              scale: true,
              focus: 'series',
              itemStyle: {
                borderWidth: 3,
                shadowBlur: 10,
                shadowColor: 'rgba(79, 172, 254, 0.5)'
              }
            },
            z: 2
          }
        ]
      };
      
      this.exerciseChart.setOption(option);
    },
    
    // 使用记录更新表单
    updateFormWithRecord(record) {
      if (!record) return;
      
      // 解析日期和时间
      const startDateTime = new Date(record.startTime);
      const endDateTime = new Date(record.endTime);
      
      // 更新表单数据
      this.exerciseForm.date = new Date(startDateTime.getFullYear(), startDateTime.getMonth(), startDateTime.getDate());
      this.exerciseForm.type = this.getEnglishType(record.sportType);
      
      // 设置开始和结束时间
      const startTime = new Date();
      startTime.setHours(startDateTime.getHours(), startDateTime.getMinutes(), 0);
      this.exerciseForm.startTime = startTime;
      
      const endTime = new Date();
      endTime.setHours(endDateTime.getHours(), endDateTime.getMinutes(), 0);
      this.exerciseForm.endTime = endTime;
      
      // 设置强度（直接使用后端返回的1-5整数值）
      this.exerciseForm.intensity = record.intensity || 3;
      
      // 设置备注
      this.exerciseForm.note = record.note || '';
    },
    
    // 格式化日期为后端需要的格式 (YYYY-MM-DD)
    formatDateForBackend(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 格式化日期和时间为后端需要的格式 (YYYY-MM-DDThh:mm:ss)
    formatDateTimeForBackend(date, time) {
      if (!date || !time) return '';
      
      const d = new Date(date);
      const t = new Date(time);
      
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      
      const hours = String(t.getHours()).padStart(2, '0');
      const minutes = String(t.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day}T${hours}:${minutes}:00`;
    },
    
    // 获取中文运动类型
    getChineseType(englishType) {
      const typeMap = {
        'walking': '步行',
        'running': '跑步',
        'cycling': '骑行',
        'swimming': '游泳',
        'hiking': '登山',
        'badminton': '羽毛球',
        'tennis': '网球',
        'basketball': '篮球',
        'football': '足球',
        'yoga': '瑜伽',
        'strength': '力量训练',
        'dance': '舞蹈',
        'other': '其他'
      };
      
      return typeMap[englishType] || '其他';
    },
    
    // 获取英文运动类型
    getEnglishType(chineseType) {
      const typeMap = {
        '步行': 'walking',
        '跑步': 'running',
        '骑行': 'cycling',
        '游泳': 'swimming',
        '登山': 'hiking',
        '羽毛球': 'badminton',
        '网球': 'tennis',
        '篮球': 'basketball',
        '足球': 'football',
        '瑜伽': 'yoga',
        '力量训练': 'strength',
        '舞蹈': 'dance',
        '其他': 'other'
      };
      
      return typeMap[chineseType] || 'other';
    },
    // 添加加载月运动建议的方法
    loadMonthExerciseAdvice() {
      this.axios.get('/api/userSport/advice/month')
        .then(response => {
          if (response.data) {
            this.monthAdvice = response.data;
          } else {
            this.monthAdvice = '';
          }
        })
        .catch(error => {
          console.error('获取月运动建议失败:', error);
          this.monthAdvice = '';
        });
    },
    
    // 添加加载周运动建议的方法
    loadWeekExerciseAdvice() {
      this.axios.get('/api/userSport/advice/week')
        .then(response => {
          if (response.data) {
            this.weekAdvice = response.data;
          } else {
            this.weekAdvice = '';
          }
        })
        .catch(error => {
          console.error('获取周运动建议失败:', error);
          this.weekAdvice = '';
        });
    },
    
    // 添加加载日运动建议的方法
    loadDayExerciseAdvice() {
      const today = this.formatDateForBackend(new Date());
      this.axios.get(`/api/userSport/advice/day?date=${today}`)
        .then(response => {
          if (response.data) {
            this.dayAdvice = response.data;
          } else {
            this.dayAdvice = '';
          }
        })
        .catch(error => {
          console.error('获取日运动建议失败:', error);
          this.dayAdvice = '';
        });
    },
    
    // 格式化运动建议显示
    formatAdvice(text) {
      if (!text) return '';
      
      // 1. 先规范化中文字符的序号格式
      // 处理一、二、三这样的中文序号，统一添加样式
      text = text.replace(/^(一|二|三|四|五|六|七|八|九|十)、\s*(.*?)$/gm, 
        '<h3 class="advice-section-title chinese-number"><span class="section-number">$1、</span>$2</h3>');
      
      // 处理1、2、3这样的数字序号加顿号的标题
      text = text.replace(/^(\d+)、\s*(.*?)$/gm,
        '<h3 class="advice-section-title number-title"><span class="section-number">$1、</span>$2</h3>');
      
      // 2. 处理标题行中的特殊图标
      text = text.replace(/🔍\s*(数据分析.*?:|数据异常警示:?)/g, 
        '<h3 class="advice-section-title"><i class="el-icon-data-analysis"></i> $1</h3>');
      text = text.replace(/✏️\s*(改善建议.*?:|现有问题分析:?)/g, 
        '<h3 class="advice-section-title"><i class="el-icon-edit-outline"></i> $1</h3>');
      
      // 3. 处理数字列表（不带顿号的常规数字列表）
      text = text.replace(/^(\d+)\.\s+(.*?)$/gm, 
        '<div class="advice-item-number"><span class="number">$1.</span> <span class="content">$2</span></div>');
      
      // 4. 处理特殊的角标列表
      text = text.replace(/^[▶▷➤➢►]\s+(.*?)$/gm, 
        '<div class="advice-item-arrow"><i class="el-icon-arrow-right"></i> <span class="content">$1</span></div>');
      
      // 5. 处理破折号列表
      text = text.replace(/^-\s+(.*?)$/gm, 
        '<div class="advice-item-dash"><i class="el-icon-minus"></i> <span class="content">$1</span></div>');
      
      // 6. 处理缩进的右箭头列表
      text = text.replace(/^\s*[>→➔]\s+(.*?)$/gm, 
        '<div class="advice-item-indented"><i class="el-icon-d-arrow-right"></i> <span class="content">$1</span></div>');
      
      // 7. 处理强调内容
      text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
      
      // 8. 处理特殊符号和标识
      text = text.replace(/🔍/g, '<i class="el-icon-search advice-icon"></i>');
      text = text.replace(/✅/g, '<i class="el-icon-check advice-icon success"></i>');
      text = text.replace(/🏃/g, '<i class="el-icon-position advice-icon"></i>');
      text = text.replace(/📊/g, '<i class="el-icon-data-line advice-icon"></i>');
      text = text.replace(/✏️/g, '<i class="el-icon-edit advice-icon"></i>');
      
      // 9. 处理时间范围和日期
      text = text.replace(/(\d{1,2}\.\d{1,2}-\d{1,2}\.\d{1,2})/g, '<span class="date-range">$1</span>');
      
      // 10. 处理换行
      text = text.replace(/\n/g, '<br>');
      
      return text;
    },
  },
  beforeDestroy() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);
    
    // 销毁图表实例
    if (this.exerciseChart) {
      this.exerciseChart.dispose();
      this.exerciseChart = null;
    }
  }
}
</script>

<style>
/* 添加全局样式，确保没有任何边距 */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  width: 100vw;
  max-width: 100vw;
}
</style>

<style scoped>
.exercise-container {
  padding: 0;
  margin: 0;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  min-height: 100vh;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  gap: 30px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
}

.record-form {
  flex: 0 0 28%;
  min-width: 320px;
  max-width: 420px;
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.record-form:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.analysis-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.time-range {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 15px;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-radio-group) {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50px;
}

:deep(.el-radio-button) {
  height: 50px;
  width: 120px;
}

:deep(.el-radio-button__inner) {
  font-size: 18px;
  padding: 0;
  height: 50px;
  line-height: 50px;
  width: 100%;
  border-radius: 8px;
  margin: 0 5px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-radio-button__inner:hover) {
  background-color: #ecf5ff;
  color: #409EFF;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.3);
}

.exercise-stats {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
  min-height: 200px; /* 固定最小高度 */
  overflow: hidden; /* 防止内容溢出 */
}

.exercise-stats:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.stats-content {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 20px 0;
  min-height: 120px; /* 固定最小高度 */
}

.stat-item {
  padding: 15px 10px; /* 调整内边距 */
  width: 33.33%; /* 确保每个项目占据相等宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 添加垂直居中 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}

.value-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90px; /* 固定高度，保证数值显示区域足够 */
  width: 100%; /* 确保宽度100% */
}

.stat-item h3 {
  font-size: 18px;
  color: #606266;
  margin-bottom: 10px;
  margin-top: 0;
  text-align: center; /* 确保标题居中 */
  width: 100%; /* 确保宽度100% */
  white-space: nowrap; /* 防止标题换行 */
  overflow: hidden; /* 防止溢出 */
  text-overflow: ellipsis; /* 文字溢出时显示省略号 */
}

.stat-item .number {
  font-size: 36px; /* 减小字体大小以适应更多数字 */
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  background-clip: text; /* 添加标准属性 */
  color: transparent;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
  text-align: center; /* 确保数字居中 */
  width: 100%; /* 确保宽度100% */
  white-space: nowrap; /* 防止数字换行 */
  overflow: hidden; /* 防止溢出 */
  text-overflow: ellipsis; /* 文字溢出时显示省略号 */
}

.stat-item .unit {
  font-size: 16px;
  color: #909399;
  margin: 5px 0 0;
  text-align: center; /* 确保单位居中 */
  width: 100%; /* 确保宽度100% */
  white-space: nowrap; /* 防止单位换行 */
}

.charts-container {
  height: 520px; /* 固定高度 */
  position: relative;
  margin-bottom: 25px;
  display: block; /* 确保显示为块级元素 */
  transition: all 0.3s ease; /* 添加过渡效果 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 占位元素样式已不需要 */
.trend-placeholder {
  display: none;
}

/* 添加淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(10px); /* 添加轻微的上移效果 */
}

.exercise-trend {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%; /* 使用100%高度填充容器 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.exercise-trend:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 450px;
  padding: 20px;
  width: 100%;
  flex-grow: 1; /* 使图表容器占据所有可用空间 */
  position: relative; /* 为加载状态提供定位上下文 */
}

/* 图表加载状态样式 */
.chart-loading, .chart-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
}

.chart-loading i, .chart-empty i {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 15px;
}

.chart-loading p, .chart-empty p {
  font-size: 18px;
  color: #606266;
  margin: 0;
}

.exercise-advice {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
  min-height: 280px;
}

.exercise-advice:hover {
  transform: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.advice-content {
  padding: 20px;
}

.advice-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.advice-item:hover {
  background: #ecf5ff;
  transform: translateX(5px);
}

.advice-item i {
  font-size: 24px;
  color: #4facfe;
  margin-top: 2px;
}

.advice-item p {
  margin: 0;
  line-height: 1.8;
  color: #606266;
  font-size: 16px;
}

:deep(.el-card__header) {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  float: left !important;
  display: inline-block !important;
  text-align: right !important;
  font-size: 16px;
  color: #606266;
}

:deep(.el-form-item__content) {
  margin-left: 120px !important;
  clear: none !important;
}

:deep(.el-rate) {
  display: inline-flex !important;
  margin-top: 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  vertical-align: middle !important;
}

:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus),
:deep(.el-textarea__inner:focus) {
  border-color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.2);
}

:deep(.el-button) {
  font-size: 16px;
  padding: 12px 25px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  border: none;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

:deep(.el-collapse-item__header) {
  font-size: 18px;
  color: #303133;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-collapse-item__header:hover) {
  background: #ecf5ff;
  color: #4facfe;
}

:deep(.el-collapse-item__content) {
  padding: 20px;
}

:deep(.el-slider__runway) {
  margin: 16px 0 8px 0;
}

:deep(.el-slider__bar) {
  background-color: #4facfe;
}

:deep(.el-slider__button) {
  border-color: #4facfe;
}

:deep(.el-slider__button-wrapper) {
  z-index: 2; /* 确保滑块按钮显示在最上层 */
}

/* 删除原有滑块标记样式 */
:deep(.el-slider__marks) {
  display: none; /* 隐藏原生标记 */
}

/* 自定义滑块容器 */
.slider-container {
  position: relative;
  padding-bottom: 30px; /* 增加底部间距 */
  width: 100%;
  margin-bottom: 10px;
}

/* 自定义标记容器 */
.custom-marks {
  position: absolute;
  bottom: 5px; /* 调整底部位置 */
  left: 0;
  width: 100%;
  height: 25px; /* 增加高度 */
}

/* 每个标记的基本样式 */
.mark-text {
  font-size: 14px;
  color: #606266;
  position: absolute;
  white-space: nowrap;
  top: 0;
}

/* 各个标记的定位 */
.mark-1 {
  left: 0;
  transform: none;
  text-align: left;
}

.mark-2 {
  left: 25%;
  transform: translateX(-50%);
  text-align: center;
}

.mark-3 {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.mark-4 {
  left: 75%;
  transform: translateX(-50%);
  text-align: center;
}

.mark-5 {
  right: 0;
  left: auto;
  transform: none;
  text-align: right;
  margin-right: 0; /* 确保没有右边距 */
  white-space: nowrap; /* 防止文本换行 */
  z-index: 3; /* 增加z-index确保显示在最上层 */
}

/* 调整滑块样式 */
:deep(.el-slider__runway) {
  margin: 16px 0 8px 0;
}

:deep(.el-slider__button-wrapper) {
  z-index: 2;
}

/* 调整滑块组件的整体宽度 */
.intensity-slider {
  width: 100%;
  margin: 0 auto;
}

/* 调整滑块容器使其有足够空间显示标记 */
.slider-container {
  position: relative;
  padding-bottom: 30px; /* 增加底部间距 */
  width: 100%;
  margin-bottom: 10px;
}

/* 自定义标记容器 */
.custom-marks {
  position: absolute;
  bottom: 5px; /* 调整底部位置 */
  left: 0;
  width: 100%;
  height: 25px; /* 增加高度 */
}

/* 每个标记的基本样式 */
.mark-text {
  font-size: 14px;
  color: #606266;
  position: absolute;
  white-space: nowrap;
  top: 0;
}

/* 确保表单内容区域的宽度适当 */
@media screen and (min-width: 992px) {
  :deep(.el-form-item__content) {
    margin-left: 120px !important;
    width: calc(100% - 130px) !important;
  }
}

/* 添加响应式布局 */
@media screen and (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    padding: 15px;
    gap: 20px;
  }
  
  .record-form {
    width: 100%;
    max-width: none;
    margin-bottom: 20px;
  }
  
  .stats-content {
    flex-wrap: wrap;
  }
  
  .stat-item {
    width: 100%;
    padding: 10px;
  }
  
  .charts-container {
    height: 400px;
  }
  
  .exercise-trend {
    height: 400px;
  }
  
  .chart-container {
    height: 330px;
  }
}

@media screen and (max-width: 768px) {
  .exercise-container {
    padding: 0;
  }
  
  .main-content {
    padding: 10px;
  }
  
  :deep(.el-radio-button) {
    height: 40px;
    width: 90px;
  }
  
  :deep(.el-radio-button__inner) {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
  
  .exercise-stats {
    min-height: 180px;
  }
  
  .stats-content {
    min-height: 100px;
    padding: 10px 0;
  }
  
  .stat-item .number {
    font-size: 36px;
  }
  
  .stat-item .unit {
    font-size: 14px;
  }
  
  .stat-item h3 {
    font-size: 16px;
  }
  
  .value-container {
    height: 70px;
  }
  
  .charts-container {
    height: 350px;
  }
  
  .exercise-trend {
    height: 350px;
  }
  
  .chart-container {
    height: 290px;
    padding: 10px;
  }
  
  /* 调整小屏幕下的滑块标记 */
  .slider-container {
    padding-bottom: 25px;
  }
  
  .mark-text {
    font-size: 12px;
  }
  
  .mark-1, .mark-2, .mark-3, .mark-4, .mark-5 {
    bottom: 0;
    top: auto;
  }
  
  .mark-2 {
    left: 22.5%;
  }
  
  .mark-4 {
    left: 77.5%;
  }
}

@media screen and (max-width: 480px) {
  .mark-text {
    font-size: 10px;
  }
  
  .slider-container {
    padding-bottom: 20px;
  }
}

/* 建议相关样式 */
.month-advice {
  padding: 10px;
}

.month-advice-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  text-align: left;
}

.month-advice-content:hover {
  background: #ecf5ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

/* 周建议样式 */
.week-advice {
  padding: 10px;
}

.week-advice-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  text-align: left;
}

.week-advice-content:hover {
  background: #ecf5ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

/* 日建议样式 */
.day-advice {
  padding: 10px;
}

.day-advice-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  text-align: left;
}

.day-advice-content:hover {
  background: #ecf5ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.no-data-advice {
  padding: 10px;
}

/* 加载中样式 */
.loading-advice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-advice i {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 15px;
}

.loading-advice p {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

/* 格式化建议的样式 */
.formatted-advice {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  text-align: left;
}

/* 章节标题样式 */
.advice-section-title {
  font-size: 20px;
  color: #4facfe;
  margin: 25px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}

.advice-section-title:first-child {
  margin-top: 0;
}

.advice-section-title i {
  margin-right: 8px;
  font-size: 22px;
}

/* 中文序号样式 */
.advice-section-title.chinese-number {
  color: #303133;
  font-weight: bold;
}

/* 数字序号样式 */
.advice-section-title.number-title {
  color: #303133;
  font-weight: bold;
}

.section-number {
  margin-right: 8px;
  color: #4facfe;
  font-weight: bold;
}

/* 列表项样式 */
.advice-item-number {
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
}

.advice-item-number .number {
  font-weight: bold;
  color: #4facfe;
  margin-right: 8px;
  flex-shrink: 0;
  min-width: 20px;
}

.advice-item-number .content {
  flex: 1;
}

/* 箭头列表项样式 */
.advice-item-arrow {
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
}

.advice-item-arrow i {
  color: #4facfe;
  margin-right: 8px;
  flex-shrink: 0;
}

.advice-item-arrow .content {
  flex: 1;
}

/* 破折号列表项样式 */
.advice-item-dash {
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
}

.advice-item-dash i {
  color: #4facfe;
  margin-right: 8px;
  flex-shrink: 0;
}

.advice-item-dash .content {
  flex: 1;
}

/* 缩进列表项样式 */
.advice-item-indented {
  margin: 12px 0 12px 20px;
  display: flex;
  align-items: flex-start;
}

.advice-item-indented i {
  color: #4facfe;
  margin-right: 8px;
  flex-shrink: 0;
}

.advice-item-indented .content {
  flex: 1;
}

/* 图标样式 */
.advice-icon {
  display: inline-block;
  margin: 0 4px;
  color: #4facfe;
}

.advice-icon.success {
  color: #67c23a;
}

/* 日期范围样式 */
.date-range {
  font-weight: bold;
  color: #409EFF;
}
</style>
